<template>
	<view class="container" style="background-color: white;">
		<!-- 导航栏 -->
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			titleStyle="{height: '52px'}" title="任务管理" @clickLeft="back">
			<block slot="right">
				<view class="city">

				</view>
			</block>
		</uni-nav-bar>

		<!-- 顶部tab -->
		<u-tabs :list="tabs" @change="onTabChange" :lineWidth="52"
			:itemStyle="{height: '52px',width:'20%',padding:'0 0'}"></u-tabs>
		<u-line :dashed="false" style="margin: -2px;"></u-line>

		<!-- 搜索栏 -->
		<u-search v-model="search" :show-action="false" :animation="false" inputAlign="center" @change="loadmore"
			style="padding: 10px;">
		</u-search>
		<u-line :dashed="false" style="margin: -2px;"></u-line>

		<u-line :dashed="false" style="margin: -2px;"></u-line>

		<!-- 列表 -->
		<scroll-view class="scroll-list" scroll-y="true">
			<view class="uni-contract-list" v-for="(contract, index) in taskList" :key="index">
				<view class="uni-contract-list-cell" @click="contractClick(contract)">
					<view class="uni-contract-list-body">
						<view class="uni-contract-list-item-content">
							<view class=""><text>{{contract.code}}</text></view>
							<text class="uni-contract-list-item-content-step">
								<view>
									<span>{{contract.departmentName}}</span></p>
									<span>{{contract.inspectType}} 预计完成时间: {{contract.finishDate}}</span>
								</view>
							</text>
						</view>
						<view class="uni-contract-list-item-extra"><text
								class="uni-contract-list-item-extra-text"><span>></span></text></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-action-sheet :actions="actions" @close="closeActionSheet" :show="showActionSheet" cancelText="取消"
			@select="selectClick"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			let tabs = [
				{
					id: "1",
					name: '待提交',
					actions: [{
						name: '查看详情'
					}]
				},
				{
					id: "2",
					name: '待确认',
					actions: [{
						name: '查看详情'
					}]
				},
				{
					id: "3",
					name: '待审批',
					actions: [{
						name: '查看详情'
					}]
				},
				{
					id: "4",
					name: '待执行',
					actions: [{
						name: '查看详情'
					}]
				},
				{
					id: "5",
					name: '完成',
					actions: [{
						name: '查看详情'
					}]
				},
			];

			// if (this.checkPermission(['officer', 'approver', 'chairman', 'centerLeader'])) {
			// 	let actions = [{
			// 		name: '查看详情'
			// 	}]
			// 	if (this.checkPermission(['officer'])) {
			// 		actions.push({
			// 			name: '退审'
			// 		})
			// 	}
			// 	if (this.checkPermission(['approver', 'chairman', 'centerLeader'])) {
			// 		actions.push({
			// 			name: '审核'
			// 		})
			// 	}
			// 	tabs.push({
			// 		id: "2",
			// 		name: '待审核',
			// 		actions: actions
			// 	})
			// }
			// if (this.checkPermission(['approver', 'chairman', 'centerLeader'])) {
			// 	tabs.push({
			// 		id: "3",
			// 		name: '待批准',
			// 		actions: [{
			// 			name: '查看详情'
			// 		}, {
			// 			name: '审核'
			// 		}]
			// 	})
			// 	tabs.push({
			// 		id: "4",
			// 		name: '待分配',
			// 		actions: [{
			// 			name: '查看详情'
			// 		}, {
			// 			name: '分配任务'
			// 		}]
			// 	})

			// }
			// if (this.checkPermission(['officer'])) {
			// 	tabs.push({
			// 		id: "5",
			// 		name: '评审通过',
			// 		actions: [{
			// 			name: '查看详情'
			// 		}]
			// 	})
			// }
			// if (this.checkPermission(['officer'])) {
			// 	tabs.push({
			// 		id: "6",
			// 		name: '退审',
			// 		actions: [{
			// 			name: '编辑详情'
			// 		}]
			// 	})
			// }
			// if (this.checkPermission(['officer', 'approver', 'chairman', 'centerLeader', 'inspector'])) {
			// 	let actions = [{
			// 		name: '查看详情'
			// 	}];
			// 	if (this.checkPermission(['approver', 'chairman', 'centerLeader'])) {
			// 		actions.push({
			// 			name: '退回再分配'
			// 		})
			// 	}
			// 	tabs.push({
			// 		id: "7",
			// 		name: '正在进行',
			// 		actions: actions
			// 	})
			// }
			// if (this.checkPermission(['officer'])) {
			// 	tabs.push({
			// 		id: "8",
			// 		name: '未提交',
			// 		actions: [{
			// 			name: '编辑详情'
			// 		}]
			// 	})
			// }
			// if (this.checkPermission(['officer', 'approver', 'chairman', 'centerLeader', 'inspector'])) {
			// 	tabs.push({
			// 		id: "9",
			// 		name: '已完成',
			// 		actions: [{
			// 			name: '查看详情'
			// 		}]
			// 	})
			// }
			return {
				actions: [],
				showActionSheet: false,
				selectedcontract: {},
				tabs: tabs,
				actionRoutes: {
					'查看详情': {
						url: '/pages/task/detail?edit=false&taskId='
					},
					'编辑详情': {
						url: '/pages/task/detail?edit=true&taskId='
					},
					'审核': {
						url: '/pages/task/detail?edit=true&taskId='
					},
					'分配任务': {
						url: '/pages/task/detail?edit=true&taskId='
					},
					'退审': {
						url: '/pages/task/detail?edit=true&taskId='
					},
					'退回再分配': {
						url: '/pages/task/detail?edit=true&taskId='
					}
				},
				selectedTab: '待评审',
				curNow: 0,
				taskList: [],
				search: "",
			}
		},
		onLoad() {
			this.onTabChange(this.tabs[0])
		},
		methods: {
			onTabChange(i) {
				this.selectedTab = i;
				this.loadmore();
			},
			closeActionSheet() {
				this.showActionSheet = false;
			},
			contractClick(contract) {

				this.selectedcontract = contract;
				this.actions = this.tabs[this.selectedTab.index].actions
				this.showActionSheet = true;
			},
			selectClick(index) {
				//跳转到具体页面
				var route = this.actionRoutes[index.name];
				if (route.url) {
					this.navTo(route.url + this.selectedcontract.id);
				} else if (route.modal) {
					this[route.modal + ''] = !this[route.modal + ''];
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				var this_ = this;

				var params = {
					params: {
						status: this.selectedTab.name,
						name: this.search,
						pageNum: 1,
						pageSize: 100
					}
				}
				this_.$u.api.task.list(params).then(res => {

					this_.taskList = res.rows;
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.uni-title {
		font-size: 30rpx;
		color: #333333;
		padding: 10px;
		background: #fff;
		border-top: 1px solid #ededed;
		margin-top: 20rpx;
	}

	.uni-contract-list-item-content-step {
		margin-top: 2px;
		color: #999;
		font-size: 13px;
		overflow: hidden;
		line-height: 18px;
	}

	.uni-contract-list-item-extra {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.uni-contract-list-item-extra-text {
		color: #999;
		font-size: 18px;
	}

	.uni-contract-list-body {
		position: relative;
		display: flex;
		flex-direction: row;
		padding: 12px 15px;
		padding-left: 15px;
		flex: 1;
		overflow: hidden;
	}

	.uni-contract-list-item-content {
		display: flex;
		padding-right: 8px;
		flex: 1;
		color: #3b4144;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}

	.uni-contract-list-text-top {
		height: 40rpx;
		overflow: hidden;
		width: 100%;
		line-height: 40rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.uni-contract-list-text-bottom {
		width: 100%;
		line-height: 28px;
		font-size: 26rpx;
		color: #666666;

		span {
			margin-right: 10rpx;
		}
	}
</style>
